<!--
 * @Author: gao_m3
 * @Date: 2020-09-18 10:12:57
 * @LastEditors: zhong_m
 * @LastEditTime: 2022-04-18 11:16:18
 * @Descripttion: 数据安全
-->
<template>
  <div class="data-container">
    <fks-row :gutter="16" type="flex" justify="center">
      <fks-col :xs="20" :sm="18" :md="18" :lg="12" :xl="12">
        <div class="title">
          <div class="fks-title-icon" />
          <div>{{ LANG.DATA_SAFE }}</div>
        </div>
        <div class="row-content-container">
          <div class="row-content">
            <div>
              <span>{{ LANG.INTERFACE_SAFE }}</span>
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.INTERFACE_TIP }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip>
            </div>
            <fks-switch v-model="form.isUrlAuth" />
          </div>
          <fks-divider />
          <div class="row-content">
            <div>
              <span>{{ LANG.REQUEST_ENCRYPT }}</span>
            </div>
            <fks-switch v-model="form.requestEncrypt" />
          </div>
          <fks-divider />
          <div class="row-content">
            <div>
              <span>{{ LANG.RESPONSE_ENCRYPT }}</span>
            </div>
            <fks-switch v-model="form.responseEncrypt" />
          </div>
          <fks-divider />
          <div class="row-content">
            <div>
              <span> {{ LANG.ONE_FILE_LIMIT }}</span>
              <fks-tooltip placement="top-start">
                <div
                  slot="content"
                  style="font-size: 14px; line-height: 20px"
                  class="tips-container"
                >
                  {{ LANG.LIMIT_FILE_TIP }}
                </div>
                <i class="fks-icon-question" />
              </fks-tooltip>
            </div>
            <div style="display: flex; align-items: center; width: 400px">
              <fks-slider
                v-model="form.maxFileSize"
                class="slider"
                :max="20480"
                :step="2048"
                show-stops
                style="flex: 1; height: 36px !important"
              />
              <fks-input-number
                v-model="form.maxFileSize"
                :controls="false"
                style="width: 75px; margin: 0 20px"
              />
              <span>M</span>
            </div>
          </div>
          <fks-divider />
          <div class="row-content">
            <div>{{ LANG.FILE_FORMAT }}</div>
            <div>
              <fks-input
                v-model="form.fileTypeWhiteList"
                type="textarea"
                maxlength="255"
              />
            </div>
          </div>
        </div>
      </fks-col>
    </fks-row>
    <div class="btn">
      <fks-button
        v-permission="['dataSafe:refresh']"
        icon="fks-icon-turn-right"
        @click="init"
      >
        {{ LANG.REDUCTION }}
      </fks-button>
      <fks-button
        v-permission="['dataSafe:update']"
        type="primary"
        icon="fks-icon-check"
        :loading="loading"
        @click="submit"
      >
        {{ LANG.UPDATE }}
      </fks-button>
    </div>
  </div>
</template>

<script>
import { getFileUploadConfig, setFileUploadConfig } from '../../api'
import Mix from '@/mixins/module'
import {
  PUT_CLIENT_CONFIG,
  GET_LATEST_CLIENT_CONFIG
} from '@/store/Action/actionTypes'
import { LATEST_CLIENT_CONFIG, DATA_SAFE } from '@/store/State/stateTypes'

export default {
  name: 'DataSecurity',
  mixins: [Mix],
  data() {
    return {
      loading: false,
      // hasSubmitted: false,
      form: {
        isUrlAuth: false, //接口安全
        requestEncrypt: false, // 请求加密
        responseEncrypt: false, // 响应加密
        fileTypeWhiteList: '', //允许的文件格式
        maxFileSize: 0 //单文件最大文件大小
      },
      temp: {}
    }
  },
  computed: {
    latestClientConfig() {
      return this.$store.state[LATEST_CLIENT_CONFIG]
    },
    dataSafe() {
      return this.$store.state[DATA_SAFE]
    }
  },
  watch: {
    dataSafe: {
      handler(val) {
        this.form = { ...this.form, ...val }
      },
      immediate: true
    }
  },
  mounted() {
    //分别数据获取
    this.$store.dispatch(GET_LATEST_CLIENT_CONFIG)
    getFileUploadConfig()
      .then((res) => {
        this.form.fileTypeWhiteList = res.data.fileTypeWhiteList
        this.form.maxFileSize = res.data.maxFileSize / 1024 / 1024
        this.temp.maxRequestSize = res.data.maxRequestSize
      })
      .catch(() => {})
  },
  methods: {
    init() {
      this.form = { ...this.form, ...this.dataSafe }
      getFileUploadConfig()
        .then((res) => {
          this.form.fileTypeWhiteList = res.data.fileTypeWhiteList
          this.form.maxFileSize = res.data.maxFileSize / 1024 / 1024
        })
        .catch(() => {})
      this.$message(this.LANG.REDUCTION_TIP)
    },
    submit() {
      if (this.form.maxFileSize < 0) {
        this.form.maxFileSize = 0
      }
      if (this.form.maxFileSize > 20480) {
        this.form.maxFileSize = 20480
      }
      this.loading = true
      let list = this.form.fileTypeWhiteList
        .split(',')
        .map((item) => item.trim())

      let errorList = [
        'sh',
        'asp',
        'cgi',
        'php',
        'php3',
        'ph3',
        'php4',
        'ph4',
        'php5',
        'ph5',
        'phtm',
        'phtml'
      ]
      //非法文件格式去除
      let temp = []
      list.forEach((item) => {
        if (errorList.indexOf(item) > -1 && temp.indexOf(item) == -1) {
          temp.push(item)
        }
      })
      if (temp.length > 0) {
        this.$message.error(this.LANG.ILLEGAL_FORMAT_TIP + ' ' + temp.join(','))
        return
      }
      //重复格式去除
      let repeat = []
      let mark = []
      list.forEach((item) => {
        if (repeat.indexOf(item) == -1) {
          repeat.push(item)
        } else {
          if (mark.indexOf(item) == -1) {
            mark.push(item)
          }
        }
      })
      if (mark.length > 0) {
        this.$message.error(mark.join(',') + ' ' + this.LANG.FORMAT_EXIST)
        return
      }
      let { fileTypeWhiteList, maxFileSize, ...dataSafe } = this.form
      let params = {
        fileTypeWhiteList,
        maxRequestSize: this.temp.maxRequestSize,
        maxFileSize: maxFileSize * 1024 * 1024
      }
      setFileUploadConfig(params)
        .then((res) => {
          if (res.status) {
            let additionalInformation = {
              ...this.latestClientConfig.additionalInformation,
              dataSafe
            }
            let settingsJSON = {
              ...this.latestClientConfig,
              additionalInformation
            }
            this.$store
              .dispatch(PUT_CLIENT_CONFIG, settingsJSON)
              .then((res) => {
                // this.hasSubmitted = true
                this.loading = false
                if (res.status) {
                  this.$message({
                    type: 'success',
                    message: this.LANG.UPDATE_SUCCESS
                  })
                }
              })
              .catch((err) => {
                this.loading = false
              })
          }
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .fks-divider--horizontal {
  margin: 0;
}

::v-deep .fks-input__inner {
  border: none;
  background-color: rgba(239, 240, 245, 0.3);
}

::v-deep .fks-textarea__inner {
  width: 400px;
  height: 160px;
  border: none;
  background-color: rgba(239, 240, 245, 0.3);
}

.mobile {
  .data-container /deep/ .fks-textarea__inner {
    width: auto;
  }
}

.data-container {
  width: 100%;
  min-width: 720px;
  height: 100%;
  padding-top: 56px;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 14px;
  background-color: white !important;

  .title {
    display: flex;
    font-weight: bold;
    font-size: 16px;
    color: #191919;
  }

  .row-content-container {
    padding: 0 24px;
    margin: 24px 0 36px;
    border: 1px solid #eee;
    border-radius: 8px;

    .row-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 64px;
      padding: 16px 0;
    }

    .slider {
      padding-left: 16px;
    }
  }

  .btn {
    margin-bottom: 36px;
    text-align: center;
  }
}
</style>